"use client"
import Image from "next/image";
import PaymentDialog from "@/components/payment-dialog"
import { Sidebar } from "@/components/sidebar";
import { Subscribe } from "@/components/subscribe";
import { useEffect, useState } from 'react';
import axios from "axios";

export default function Home() {

  const [usageBasic, setUsageBasic] = useState(0);
  const [usagePremium, setUsagePremium] = useState(0);
  const [vipLevel, setVipLevel] = useState(0);
  const [isLoginVisible, setIsLoginVisible] = useState(true);

  const getUsage = () => {

    let config = {
      method: 'get',
      maxBodyLength: Infinity,
      url: `${process.env.NEXT_PUBLIC_API_URL}/api/user/usage`
    };

    axios.request(config)
      .then((response) => {
        setUsageBasic(response.data.usageBasic);
        setUsagePremium(response.data.usagePremium);
        setVipLevel(response.data.vipLevel)
        setIsLoginVisible(false)
      })
      .catch((error) => {
        console.log(error);
        setIsLoginVisible(true);
      });
  }

  useEffect(() => {
    getUsage();
  });
  

  const [isDialogOpen, setIsDialogOpen] = useState(false);

  const [isProcessingDialogOpen, setIsProcessingDialogOpen] = useState(false);
  const showPaymentDialog = () => {
    setIsDialogOpen(true);
  };

  const closePaymentDialog = () => {
    setIsDialogOpen(false);
  };
  return (
    <>
      <div className="flex">
        <PaymentDialog isOpen={isDialogOpen} onClose={closePaymentDialog}></PaymentDialog>
        <div className="w-64">
          <Sidebar usagePremium={usagePremium} usageBasic={usageBasic} vipLevel={vipLevel} isLoginVisible={isLoginVisible} ></Sidebar>
        </div>
        <div className="w-full h-screen p-4 overflow-auto ">
          <Subscribe openPaymentDialog={showPaymentDialog} isVip={vipLevel} ></Subscribe>
        </div>

      </div>
    </>
  );
}
